<template>
  <!--产品列表左侧部分-->
  <!--重构时按字段名是否有显示相应模块，开发时根据接口响应再完善-->
  <div class="left_column">
    <slot>
      <p :class="calcFieldValue[1]">{{ calcFieldValue[0] }}</p>
      <p class="sub_text">{{ calcFieldName }}</p>
    </slot>
  </div>
</template>

<script>
import { getZdfClassName } from '@/utils/common';

export default {
  name: 'ProductLeft',
  props: ['productInfo'],
  computed: {
    calcFieldValue() {
      let fieldValue = '--';
      let fieldClass = '';
      if (this.productInfo.stock_code) {
        // 天添金
        fieldClass = getZdfClassName(this.productInfo.expire_year_rate);
        fieldValue = parseFloat(this.productInfo.expire_year_rate * 100).toFixed(2);
        return [`${fieldValue}%`, fieldClass];
      }

      // 栏目基金
      if (this.productInfo.columnCode) {
        fieldClass = getZdfClassName(this.productInfo.navValue);
        return [this.productInfo.nav, fieldClass];
      }

      // 其他产品
      fieldValue = `${this.productInfo.incomeUnit}`;

      return [fieldValue, 'rise'];
    },
    calcFieldName() {
      let fieldName;
      if (this.productInfo.stock_code) {
        // 天添金
        fieldName = '年化收益率';
        return fieldName;
      }

      // 栏目基金
      if (this.productInfo.columnCode) {
        return this.productInfo.navDesc;
      }

      // 其他产品
      fieldName = this.productInfo.incomeAttribute;
      return fieldName;
    }
  },
  methods: {
    getZdfClassName
  }

};
</script>

<style lang="less" scoped>
</style>